<template>
  <div class="goodsDetail">
    <div class="title">物资计划上报单</div>
    <div class="goodsDetail-border">
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('计划单号') }}：</div>
          <div class="w320">{{ formInfo.PlanNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('工厂') }}：</div>
          <div class="w320">{{ formInfo.Factory }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('采购组') }}：</div>
          <div class="w320">{{ formInfo.PurchaseGroup }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('分配类别') }}：</div>
          <div class="w320">{{ formInfo.SubjectCate }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('供货工厂') }}：</div>
          <div class="w320">{{ formInfo.SupFactory }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('交货时间') }}：</div>
          <div class="w320">{{ formInfo.DeliveryDate }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('成本中心') }}：</div>
          <div class="w320">{{ formInfo.CostCenter }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('WBS元素') }}：</div>
          <div class="w320">{{ formInfo.WBSele }}</div>
        </div>
      </div>
      <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('投资名称') }}：</div>
          <div class="w320">{{ formInfo.InvestName }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('技术标准') }}：</div>
          <div class="w320">{{ formInfo.TechLevel }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('备注') }}：</div>
          <div class="w320">{{ formInfo.Remark }}</div>
        </div>
      </div>
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('入库时间') }}：</div>
          <div class="w320">{{ formInfo.InComeDate }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('采购订单') }}：</div>
          <div class="w320">{{ formInfo.PurchaseNo }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('实物收料人') }}：</div>
          <div class="w320">{{ formInfo.MaterialReceiver }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('财务复核人') }}：</div>
          <div class="w320">{{ formInfo.FinancialReviewer }}</div>
        </div>
      </div> -->
      <!-- <div class="flex_align border-div">
        <div class="mr20">
          <div class="w130">{{ translate('制单人') }}：</div>
          <div class="w320">{{ formInfo.Documenter }}</div>
        </div>
        <div class="mr20">
          <div class="w130">{{ translate('备注') }}：</div>
          <div class="w320">{{ formInfo.Description }}</div>
        </div>
      </div> -->
    </div>
    <div class="tableDetail">
      <el-table
        border
        :data="tableData"
        :header-cell-style="headerCellStyle"
        show-summary
        style="width: 1400px"
      >
        <!-- <el-table-column :label="translate('序号')" type="index" /> -->
        <el-table-column :label="translate('类别')">
          <template #default="{ row }">
            <div>{{ row.ItemCate }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column :label="translate('物料组编码')">
          <template #default="{ row }">
            <div>{{ row.ItemGroupCode }}</div>
          </template>
        </el-table-column> -->
        <el-table-column :label="translate('物资编码')">
          <template #default="{ row }">
            <div>{{ row.ItemCode }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('物料名称')">
          <template #default="{ row }">
            <div>{{ row.ItemName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('规格')">
          <template #default="{ row }">
            <div>{{ row.ItemSpec }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('物资组')">
          <template #default="{ row }">
            <div>{{ row.ItemGroup }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('物资组名称')">
          <template #default="{ row }">
            <div>{{ row.ItemGroupName }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('数量')">
          <template #default="{ row }">
            <div>{{ row.Qty }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('价格')">
          <template #default="{ row }">
            <div>{{ row.Price }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('计量单位')">
          <template #default="{ row }">
            <div>{{ row.ItemUnit }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('金额')">
          <template #default="{ row }">
            <div>{{ row.TotalAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="translate('用途')">
          <template #default="{ row }">
            <div>{{ row.Purpose }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex_align">
      <div class="mr20">
        <div class="w130">{{ translate('计划上报人员') }}：</div>
        <div class="w320">{{ formInfo.PlanPerson }}</div>
      </div>
      <div class="mr20">
        <div class="w130">{{ translate('审批') }}：</div>
        <div class="w320">{{ formInfo.PurchaseNo }}</div>
      </div>
      <!-- <div class="mr20">
          <div class="w130">{{ translate('实物收料人') }}：</div>
          <div class="w320">{{ formInfo.MaterialReceiver }}</div>
        </div> -->
      <div class="mr20">
        <div class="w130">{{ translate('保管员') }}：</div>
        <div class="w320">{{ formInfo.FinancialReviewer }}</div>
      </div>
    </div>
  </div>
</template>
<script>
  import { translate } from '@/i18n'
  export default {
    name: 'Detail',
    components: {},
    props: {
      form: {
        type: Object,
        default: () => {
          return {}
        },
      },
      fromprint: {
        type: String,
        default: '',
      },
      chileddetail: {
        type: Array,
        default: () => {
          return []
        },
      },
      supplierdata: {
        type: Array,
        default: () => {
          return []
        },
      },
      isprint: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['deletedchild'],
    data() {
      return {
        ItemList: [],
        itemChiledList: [],
        WmsData: [], // 选择物资数据
        formInfo: this.form,
        layout: 'total, sizes, prev, pager, next, jumper',
        pageNo: 1,
        pageSize: 10,
        radio: '',
        options: [],
        deleArr: [],
        tableData: this.chileddetail,
        searchChild: '',
        IsPrint: this.isprint,
        headerCellStyle: {
          background: '#ffffff !important',
          color: '#000000',
          'border-bottom': '1px solid #000000',
        },
      }
    },
    watch: {
      chileddetail(val) {
        console.log(val)
        this.tableData = val
      },
      form(val) {
        this.formInfo = val
      },
    },
    methods: {
      translate(row) {
        return translate(row)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .goodsDetail {
    font-size: 16px;
    height: 600px;

    .goodsDetail-border {
      width: 1290px;
      margin: auto;
      // border: 1px solid #000000;
      .border-div {
        // border-bottom: 1px solid;
        height: 60px;
        padding: 10px;
      }
      .border-div:last-child {
        border: none;
      }
    }
  }
  .flex_align {
    display: flex;
    align-items: center;
  }
  .tableDetail {
    padding: 10px;
    .button-add {
      text-align: end;
      padding: 10px;
    }
  }
  .title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
  }
  .mr20 {
    // margin-right: 20px;
  }
  .w130 {
    display: inline-block;
    width: 130px;
    text-align: right;
  }
  .w320 {
    display: inline-block;
    width: 180px !important;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep .el-scrollbar__wrap {
    overflow-x: auto;
    height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
  }
  ::v-deep .el-table--scrollable-x .el-table__body-wrapper {
    overflow-x: hidden;
  }

  /**
改变边框颜色
 */
  ::v-deep .el-table--border,
  .el-table--group {
    border: 1px solid #000 !important;
  }
  /**
改变表格内竖线颜色
 */
  ::v-deep .el-table--border td,
  .el-table--border th,
  .el-table__body-wrapper
    .el-table--border.is-scrolling-left
    ~ .el-table__fixed {
    border-right: 1px solid #000 !important;
  }
  /**
改变表格内行线颜色
 */
  ::v-deep .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #000 !important;
  }

  ::v-deep .el-table thead tr th {
    border-color: #000;
  }
  /* g改变表头字体颜色 */
  ::v-deep .el-table thead {
    color: #000000;
  }
  @media print {
    @page {
      page-size: A4;
      margin: 5mm;
    }

    .goodsDetail {
      /* margin: 20cm; */
      margin: 0 auto;
      /* 打印时缩放，防止页面溢出 */
      zoom: 0.74;
    }
    .cover {
      display: block;
    }
    tr {
      /* 行被截断时自动换行 */
      page-break-before: always;
      page-break-after: always;
      page-break-inside: avoid;
    }
  }
</style>
